<nav
class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
id="layout-navbar">
<div class="layout-menu-toggle navbar-nav align-items-xl-center me-4 me-xl-0 d-xl-none">
  <a class="nav-item nav-link px-0 me-xl-6" href="javascript:void(0)">
    <i class="bx bx-menu bx-md"></i>
  </a>
</div>

<div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
  <!-- 搜索框 -->
  <div class="navbar-nav align-items-center">
    <div class="nav-item d-flex align-items-center">
      <i class="bx bx-search bx-md"></i>
      <input
        type="text"
        class="form-control border-0 shadow-none ps-1 ps-sm-2"
        placeholder="搜索..."
        aria-label="搜索..." />
    </div>
  </div>
  <!-- /搜索框 -->

  <ul class="navbar-nav flex-row align-items-center ms-auto">
    <!-- 在此处放置按钮 -->
    <li class="nav-item lh-1 me-4">
      
    </li>

    <!-- 用户 -->
    <li class="nav-item navbar-dropdown dropdown-user dropdown">
      <a
        class="nav-link dropdown-toggle hide-arrow p-0"
        href="javascript:void(0);"
        data-bs-toggle="dropdown">
        <div class="avatar avatar-online">
          <img src="/static/HubUI/assets/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle" />
        </div>
      </a>
      <ul class="dropdown-menu dropdown-menu-end">
        <li>
          <a class="dropdown-item" href="#">
            <div class="d-flex">
              <div class="flex-shrink-0 me-3">
                <div class="avatar avatar-online">
                  <img src="/static/HubUI/assets/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle" />
                </div>
              </div>
              <div class="flex-grow-1">
                <h6 class="mb-0">{{ user.username }}</h6>
                <small class="text-muted">管理员</small>
              </div>
            </div>
          </a>
        </li>
      
      
        <li>
          <div class="dropdown-divider my-1"></div>
        </li>
        <li>
          <a class="dropdown-item" href="javascript:void(0);" onclick="handleLogout()">
            <i class="bx bx-power-off bx-md me-3"></i><span>退出登录</span>
          </a>
        </li>
      </ul>
    </li>
    <!--/ 用户 -->
  </ul>
</div>
</nav>

<script>
function handleLogout() {
    // 清除本地存储
    localStorage.removeItem('userInfo');
    sessionStorage.removeItem('userInfo');
    
    // 清除所有cookie
    document.cookie.split(';').forEach(function(c) {
        document.cookie = c.trim().split('=')[0] + '=;' + 'expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/';
    });
    
    // 显示提示
    showToast('已退出登录', 'success');
    
    // 延迟跳转到登录页面
    setTimeout(() => {
        window.location.href = '/web/login_and_register/';
    }, 1000);
}

// 页面加载时设置用户信息
document.addEventListener('DOMContentLoaded', function() {
    // 获取用户信息
    const userInfo = JSON.parse(localStorage.getItem('userInfo') || sessionStorage.getItem('userInfo') || '{}');
    
    // 如果有用户信息，则显示用户名
    if (userInfo && userInfo.username) {
        const usernameElement = document.querySelector('.flex-grow-1 h6');
        if (usernameElement) {
            usernameElement.textContent = userInfo.username;
        }
    }
});
</script>